<template>
	<view class="pages">
		<scroll-view scroll-y="true" class="contentbox" @scrolltolower="scrolltolower">
			<view class="search">
				<u--input
					@confirm="handleinput" 
					@clear="handleclear"
					style="background-color: #fff;"
					placeholder="根据高速/收费站名称搜索" 
					prefixIcon="search" 
					shape="circle" 
					:clearable="true" 
					v-model="search"
					prefixIconStyle="font-size: 22px;color: #949292;">
				</u--input>
			</view>
			<view v-if="list.length == 0">
				<view style="height: 100rpx"></view>
				<u-empty text=" - 暂无数据 - " mode="list"></u-empty>
			</view>
			<view class="boxes font-size-30" v-for="(item, index) in list" :key="index">
				<view class="flex2 m-b-20">
					<view class="bold title">城市：</view>
					<view>{{item.province_name}}{{item.city_name}}{{item.area_name}}</view>
				</view>
				<view class="flex2 m-b-20">
					<view class="bold title">高速名称：</view>
					<view>{{item.title}}</view>
				</view>
				<view class="flex2 m-b-20">
					<view class="bold title">收费站名称：</view>
					<view>{{item.name}}</view>
				</view>
				<view class="flex2 m-b-20">
					<view class="bold title">入口允许最大宽度：</view>
					<view>{{item.get_max}}米</view>
				</view>
				<view class="flex2 m-b-20">
					<view class="bold title">出口允许最大宽度：</view>
					<view>{{item.out_max}}米</view>
				</view>
				<view class="flex2 m-b-20">
					<view class="bold title">地磅信息：</view>
					<view>{{item.waice}}</view>
				</view>
				<view class="flex2 m-b-20">
					<view class="bold title">备注：</view>
					<view>{{item.remark}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			search:'',
			page: 1,
			limit: 20,
			length: true,
			list: [
				// { id: 1, type: 1 },
				// { id: 1, type: 2 }
			]
		};
	},
	async onLoad(options) {
		await this.getList();
	},
	methods: {
		// 上拉
		scrolltolower() {
			console.log('触底');
			if (this.length) {
				this.page++;
				this.getList();
			}
		},
		// 搜索
		handleinput(e) {
			console.log(this.search);
			this.page = 1;
			this.list = [];
			this.getList()
		},
		// 清空
		handleclear() {
			console.log('清除');
			this.search = '';
			this.page = 1;
			this.list = [];
			this.getList()
		},
		// 列表
		async getList() {
			let res = await this.$api.shoufeizhan({
				city: uni.getStorageSync('cityCode'),
				keys:this.search,
				page_no: this.page,
				page_size: this.limit
			});
			if (res.code == 1) {
				this.length = res.data.lists.length == this.limit;
				this.list.push(...res.data.lists);
			}
		}
	}
};
</script>

<style scoped lang="less">
.pages {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.contentbox {
	flex: 1;
	overflow: hidden;
	padding: 20rpx 15rpx;
	box-sizing: border-box;
	
	.search{
		margin-bottom: 10rpx;
	}

	.boxes {
		padding: 25rpx 30rpx;
		margin-bottom: 17rpx;
		border-radius: 20rpx;
		border: 1px solid #eee;

		.title{
			width: 280rpx;
			white-space: nowrap;
			text-align: right;
			flex-shrink: 0;
		}
	}
}
</style>
